<template>
	<view class="pages">
		<view class="content ">
			<!-- <view class="mask_login" v-if="!token" @click="login = true"></view> -->
			<view class="page-top">
				<!-- search -->
				<view class="search-box" @click="utlis.goUrl('/pages/index/search')">
					<u-icon name="search"></u-icon>
					<text>搜索项目名称</text>
				</view>
				
				<!-- banner -->
				<view class="bgcolor" >
					<u-swiper :list="bannerList" height="244"></u-swiper>
				</view>
				
				<!-- 定位 -->
				<view class="site-top" @click="toStoreFun()" :style="{top:menuButtonInfo.top+'px',height:menuButtonInfo.height+'px'}">
					<text class="iconfont icon-dingwei"></text>
					<view>{{defaultAddress.title || '获取中'}}</view>
					<text class="iconfont icon-a-xiala1" v-if="toStore.ls_count > 1"></text>
				</view>
			</view>
			<view v-show="isTop" :style="{height:statusBar+'px'}" class="navStatus"></view>
			
			<view class="vessel">
				
				<!-- 门店 -->
				<view class="shop">
					<!-- 头部 -->
					<view class="shop__header" v-if="defaultAddress.title">
						<view class="shop__header-left">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuijin.png"></image>
						</view>
						<view class="shop__header-right" v-if="toStore.ls_count > 1" @click="switchStores">
							切换门店
							<text class="iconfont icon-a-arrowbeifen3"></text>
						</view>
					</view>
					
					<!-- main -->
					<view class="shop__mains" v-if="defaultAddress.name" :class="plShow ? 'plHide' :''">
						<view class="shop__mains-views">
							<image class="image" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/geren2141.png"></image>
							技师信息：{{(staffObj.name ? staffObj.name : defaultAddress.name) || '-'}} · <text @click="callFun(staffObj.mobile ? staffObj.mobile : defaultAddress.mobile)" class="blue">{{(staffObj.mobile ? staffObj.mobile : defaultAddress.mobile) || '-'}}</text>
							
							<uni-icons @click="plShow = !plShow" type="down" class="plIcons" size="20"></uni-icons>
							<!-- <image class="imagel" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/Frame@2x(4).png"></image> -->
							<image class="imagel" @click.native="goUrl(1)" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/weizhi344.png"></image>
						</view>
					</view>
					
					<view class="shop__main" v-if="defaultAddress.title" :class="plShow ? 'plShow' :''">
						<view class="shop__main-title" @click="plShow = !plShow">{{defaultAddress.title || '获取失败'}} <uni-icons class="plIcons" type="up" size="20"></uni-icons></view>
						<view class="shop__main-fen">
							<u-rate :size="26" :current="defaultAddress.score || 5" active-color="#E5C372" inactive-color="#E0E0E0" inactive-icon="star-fill" disabled></u-rate>
							<text class="u-p-l-16">{{Number(defaultAddress.score || 0).toFixed(1) || "暂无评分"}}</text>
						</view>
						<view class="shop__main-view">
							<image class="image" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/geren2141.png"></image>
							技师信息：{{(staffObj.name ? staffObj.name : defaultAddress.name) || '-'}} · <text @click="callFun(staffObj.mobile ? staffObj.mobile : defaultAddress.mobile)" class="blue">{{(staffObj.mobile ? staffObj.mobile : defaultAddress.mobile) || '-'}}</text>
						</view>
						<view class="shop__main-view">
							<image class="image" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/shijian3542.png"></image>
							营业时间：早上{{defaultAddress.start_time || '-'}}-凌晨{{defaultAddress.end_time || '-'}}
						</view>
						<view class="shop__main-view plView">
							<image class="image" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/dingwei23432.png"></image>
							店铺地址：<text class="blue" @click.native="goUrl(1)">{{defaultAddress.position || '-'}}</text>
						</view>
						<view class="shop__main-view pls">
							<image class="image" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/weizhi333.png"></image>
							{{defaultAddress.distance_km || '-'}}km
						</view>
						<!-- <view class="shop__main-hr"></view>
						<view class="shop__main-box">
							<view class="boxLeft" @click="callFun(defaultAddress.mobile)">
								<image class="image" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/Frame@2x(4).png"></image>
								<text>拨打电话</text>
							</view>
							<view class="boxRight" @click="goUrl(1)">
								<image class="image" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/weizhi344.png"></image>
								<text>地图导航</text>
							</view>
						</view> -->
					</view>
				</view>
				
				<!-- 会员卡片 -->
				<view class="advertising" @click="goVipFun()">
					<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg5.png"></image>
				</view>
				
				<!-- 分类 -->
				<view class="tabWrap">
					<view class="tabWrap__view">
						<view class="tabWrap__view-name" v-for="(item,i) in cateList" :class="tabIndex == i ? 'tab-active' : ''" @click="tabsClick(item,i)">
							{{item.name}}
							<image v-if="tabIndex == i" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg234567.png" class="bg" />
						</view>
					</view>
				  <scroll-view scroll-x class="classifyList" 
				  :scroll-with-animation="true"
				  :scroll-into-view="`nav${tabIndex - 1}`"
				  >
					  <view class="tab" :id="`nav${i}`" @click="typeClick(item,i)" style="display:inline-block" :class="effectIndex == i ? 'tab-active plsss' : ''" v-for="(item,i) in effectData" :key="i">
						  {{item.name}}
						  <!-- <image v-if="tabIndex == i" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg234567.png" class="bg" /> -->
					  </view>
					</scroll-view>
					<!-- 筛选 -->
					<image class="screen" v-if="tabIndex === 1" @click="screenFun" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/sx.png" mode=""></image>
				</view>
				
				<!-- 项目列表 -->
				<view class="goods-box">
					<view class="goods" v-for="item in list" :key="item" @click.stop="goDetail(item.id, `/pages/shop/projectInfo?peoject_id=${item.id}&type=${tabIndex}`)">
						<image :src="item.pic" mode="aspectFill"></image>
						<view class="plsL">
							<view class="t1">
								<text class="t1-name">{{item.name}}</text>
								<text class="t1-auto">已售{{item.sold_num || 0}}件</text>
							</view>
							<view class="t3" v-if="item.tags.length > 0">
								<text v-for="row in item.tags">{{row.tags.name || '-'}}</text>
							</view>
							<view class="t2">
								<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/shijian223.png"></image>{{item.duration}}分钟
							</view>
							<text class="price-texts" v-if="item.single_price && tabIndex != 1 && (item.single_price != '0.00')">单次价格：<text>¥</text>{{item.single_price}}</text>
							<view class="price">
								<text class="price-text"><text>¥</text>{{item.price}}</text>
								<!-- v-if="userInfo.vip_id <= 0" -->
								<!-- <text class="price-text" v-else>¥{{item.vip_price}}</text> -->
								<text class="buy left-auto" @click.stop="onceMake(item.id,item)">立即购买</text>
								<!-- <view class=" make left-auto" @click.stop="buy(item)">立即购买</view> -->
								<view v-if="item.address" class="citys left-auto">
									{{item.address}}
								</view>
							</view>
						</view>
					</view>
					<u-loadmore margin-top="60" margin-bottom="30" :status="status" />
				</view>
			</view>
			
			
			<!-- <u-modal v-model="isPhoneAuth" :content="'您还未绑定手机号,请先绑定手机号'">
				<view slot="confirm-button">
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="wxlogin">
						绑定
					</button>
				</view>
			</u-modal> -->
			
			<!-- 兼容快手小程序写法 -->
			<u-popup v-model="isPhoneAuth" mode="center" border-radius="20" width="400rpx">
				<view class="loginPop">
					<view class="loginPop-title">您还未绑定手机号,请先绑定手机号</view>
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="wxlogin">
						绑定
					</button>
				</view>
			</u-popup>
			
			<!-- 兼容快手小程序写法 -->
			<u-popup v-model="login" mode="center" border-radius="20" width="400rpx">
				<view class="loginPop">
					<view class="loginPop-title">您还未登陆,请登录</view>
					<view class="loginPop-main">
						<view class="loginPop-main-close" @click="login = false">取消</view>
						<button @click="getLogin" class="wxlogin">
							登录
						</button>
					</view>
				</view>
			</u-popup>
			
		</view>
		
		<!-- 加盟按钮 -->
		<!-- v-if="userInfo.is_staff < 1" -->
		<view class="league" @click="plFun()" v-if="userInfo.is_staff < 1">
			<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/league.png"></image>
		</view>
		
		
		<!-- 筛选弹窗 -->
		<!-- <screenPop :show="screenShow" ref="screenRef" @clickHandle="clickHandle" @clickSubmit="clickSubmit"></screenPop> -->
		
		<!-- 城市筛选弹窗 -->
		<u-select v-model="pickerShow" :default-value="defaultValue" mode="mutil-column-auto" :list="pickerList" value-name="id" label-name="area_name" child-name="child" @confirm="pickerConfirm"></u-select>
		<!-- 加盟认证弹窗 -->
		<authentication :show="authenticationShow" @clickHandle="authenticationHandle"></authentication>
		
		<!-- 底部弹框选择门店弹框 -->
		    <u-popup ref="popup" mode="center" v-model="showBottomList">
		      <view class="popup-store-content">
		        <view class="popup-store-header">
		          <text>选择门店</text>
		        </view>
		        <scroll-view scroll-y class="store-list">
		          <view 
		            v-for="(item, index) in bottomStoreList" 
		            :key="item.id" 
		            class="store-item"
		            @click="handleSelectStore(item)"
		          >
		            <text class="store-title">{{ item.store.title }}</text>
		            <text class="store-position">{{ item.store.position }}</text>
		          </view>
		        </scroll-view>
		      </view>
		    </u-popup>
	</view>
</template>
<script>
	import Amap from '@/utlis/amap-wx'
	import screenPop from '@/components/screen/index.vue'
	import authentication from '@/components/pop/authentication.vue'
	
	export default {
		components:{
			screenPop,
			authentication
		},
		data() {
			return {
				plShow: false,
				defaultValue: [],
				isPhoneAuth:false,
				pickerList: [],
				pickerShow: false,
				login:false,
				menuButtonInfo:{},
				tabIndex:0,
				statusBar:0,
				isTop:false,
				cateList:[{name: '特色项目', id: 0}, {name: '推荐项目', id: 1}],
				card_id:0,
				list:[],
				initAmapData:'',
				status:'loading',
				intervalId: null,
				total:0,
				page:1,
				bannerList:[],
				isNext:true,
				screenShow: false,
				authenticationShow: false,
				loginInfo:{
					code:'',
					iv:'',
					encryptedData:'',
					store_id:'',
					share_user_id:'',
					encryptedDataPhone:'',
					ivPhone:''
				},
				objItem: {},
				effectData:[],
				effectIndex: 0,
				staffObj:{
					name: '',
					mobile: ''
				},
				fromData: {
					province_id:'',
					city_id: '',
					// area_id: ''
				},
				bottomStoreList: [],
				showBottomList: false,
			}
		},
		async onLoad({share_user_id, scene}) {
			this.list = []
			this.page=1
			console.log("onLoad参数", {share_user_id, scene})
			
			// 二维码携带参数
			if (scene) {
				const sceness = decodeURIComponent(scene || '');
				const params = this.parseQuery(sceness);
				console.log('二维码携带参数------------：', params)
				if (params.cid) this.$u.vuex("cid", params.cid) // 子账号id
				if (params.sid) {
					this.$u.vuex('userInfo', {})
					this.$u.vuex("store_id", params.sid) // 门店
					this.$u.vuex("makeStore_id",params.sid)
					this.$u.vuex("toStore_id",params.sid)
					// 更换token
					let {data,code} = await this.$u.api.checkStoreGetToken();
					if (code) {
						console.log('token 之后的数据', data)
						this.$u.vuex('token', data)
						this.getUserInfo()
					}
				}
				if (params.fid) {
					this.$u.vuex("fid", params.fid) // 扫码对应员工id
					let {data,code,msg} = await this.$u.api.getStaff({id: params.fid});
					console.log(66, code, msg, params.fid, this.store_id, params.sid)
					if(code) {
						this.staffObj.name = data[0].name
						this.staffObj.mobile = data[0].phone
					}
					// defaultAddress.name defaultAddress.mobile
				}
				// 跳转优惠券  领取
				if (params.is_c){
					// params.fid
					// params.dc 优惠券id
					setTimeout(()=>{
						this.jump('/pages/mine/couponList?fid='+params.fid +'&dc=' + params.dc)
					})
				}
			} else {
				this.getStore()
				// if (this.store_id == "") this.$u.vuex("store_id", '34') // 如果不是扫码进来的  默认给个总店
			}
			
			// this.$u.vuex("fid", 229) // 扫码对应员工id
			
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.statusBar = uni.getSystemInfoSync().statusBarHeight;
			if(!this.token){
				this.status="nomore"
			}
			if(share_user_id){
				this.$u.vuex("share_user_id",share_user_id)
			}
			// this.authenticationShow = true
			console.log(1111111111)
		},
		async onPullDownRefresh() {
			this.list=[]
			// this.cateList=[]
			
			this.page = 1
			this.total = 0
			this.card_id=0
			this.tabIndex =0
			this.effectIndex =0
			this.bannerList=[]
			this.plShow = false
			// await this.getProjectList()
			await this.getAd()
			this.getCate()
			
			this.$u.toast('刷新成功!')
			uni.stopPullDownRefresh()
		},
		// 分页加载
		onReachBottom() {
			console.log(565, this.total , this.list.length)
			if (this.total > this.list.length) {
				this.page++;
				this.getProjectList();
			}
		},
		//分享到朋友圈
		onShareTimeline: function (res) {
			return {
				title: '友约',
				path: '/pages/index/index',
			}
		},
		onShareAppMessage: function (res) {
			  if (res.from !== 'button') {
			     // 来自页面内转发按钮
			 	  return {
			 		 title: '友约',
			 		 path: '/pages/index/index',
			 	   }
			   }
		},
		async onShow() {
			// 是否推荐项目  重置
			this.$u.vuex("isRecommend", "")
			this.$u.vuex("makeDays", "")
			this.$u.vuex("makeTime", "")
			
			console.log(22222222)
			
			wx.showShareMenu({
			   withShareTicket:true,
			   menus:['shareAppMessage','shareTimeline']
			})
			// 实例化API核心类
			this.initAmapData = new Amap.AMapWX({
				key: 'e7b185f0ab2af78680dea5db822b011a',
			});
			this.getaddr();
			if(this.token){
				this.getUserInfo()
			}
			this.list=[]
			this.page = 1
			this.total = 0
			this.card_id=0
			this.tabIndex =0
			this.bannerList=[]
			// console.log(this.isNext,"this.isNextthis.isNextthis.isNextthis.isNext")
			// if(this.isNext){
				// this.isNext = false;
			// }
			
			if (this.store_id) {
				this.getCate()
				// this.getProjectList()
				this.getAd()
				this.treeFun()
			}
			
			
			if (this.userLocationStore.length < 1) {
				// 启动定时器
				this.intervalId = setInterval(() => {
				   // console.log('计时器--------', this.userLocationStore)
				   if (this.userLocationStore.length < 1) {
						this.getStore()
				   } else {
					   // console.log('计时器结束+++++++++++++++')
					   clearInterval(this.intervalId);
					   this.intervalId = null;
				   }
				}, 1000);
				
			} else {
				this.getStore()
			}
		},
		onUnload() {
		    // 页面卸载时清除定时器
		    if (this.intervalId) {
		      clearInterval(this.intervalId);
		      this.intervalId = null;
		    }
		},
		onPageScroll(e){
			if(e.scrollTop>230&&!this.isTop){
				this.isTop = true;
				uni.setNavigationBarColor({
					frontColor:'#000000',
					backgroundColor:'#FFFFFF',
					success() {
					},
					fail(err) {
						console.log(err);
					}
				})
			}else if(e.scrollTop<230&&this.isTop){
				this.isTop = false;
				uni.setNavigationBarColor({
					frontColor:'#ffffff',
					backgroundColor:'#000000',
					success() {
						
					},
					fail(err) {
						console.log(err);
					}
				})
			}
		},
		methods: {
			goVipFun() {
				if(!this.token){
					this.login = true
					return
				}
				this.utlis.goUrl('/pages/mine/vipList')
			},
			// 回调参数为包含columnIndex、value、values
			pickerConfirm(e) {
				console.log('confirm', e)
				this.pickerShow = false
				// this.select = e[0].label + '-' + e[1].label + '-' + e[2].label
				this.fromData.province_id = e[0].value || ''
				this.fromData.city_id = e[1].value || ''
				// this.fromData.area_id = e[2].value || ''
				console.log(34, this.fromData.province_id, this.fromData.city_id)
				
				this.defaultValue = [] 
				this.pickerList.forEach((item,i) =>{
					if (item.area_name === e[0].label) {
						this.defaultValue.push(i)
						item.child.forEach((row, j) =>{
							if (row.area_name === e[1].label) {
								this.defaultValue.push(j)
								// row.child = []
								// row.child.forEach((obj, k) =>{
								// 	if (obj.area_name === e[2].label) {
								// 		this.defaultValue.push(k)
								// 	}
								// })
							}
						})
					}
				})
				
				console.log(77, this.defaultValue)
				this.list = []
				this.page=1
				this.getProjectList()
			},
			async treeFun() {
				let { data, code, msg } = await this.$u.api.tree({is_city: 1});
				if (code) {
					this.pickerList = data
					// this.pickerList.forEach(item =>{
					// 	item.child.forEach(row => {
					// 		// console.log(555, row)
					// 		if (row.child) {
					// 			row.child = []
					// 		} else {
					// 			row.child = []
					// 		}
					// 	})
					// })
				}
			},
			switchStores() {
				if(!this.token){
					this.login = true
					return
				}
				this.utlis.goUrl('/pages/mine/selectStores?type=1');
				this.tabIndex=0;
				this.card_id=0
			},
			async getCate() {
				let {data,code} = await this.$u.api.getCate({
					is_sys: this.tabIndex === 1 ? '1' : ''
				});
				if (code) {
					data.unshift({id: '', name:'全部'})
					this.effectData = data
					this.getProjectList()
				}
			},
			parseQuery(queryStr) {
			  const params = {};
			  queryStr.split('&').forEach(pair => {
			    const [key, value] = pair.split('=');
			    if (key) params[key] = decodeURIComponent(value || '');
			  });
			  return params;
			},
			toStoreFun() {
				if(!this.token){
					this.login = true
					return
				}
				if (this.toStore.ls_count > 1) {
					this.utlis.goUrl('/pages/mine/selectStores?type=1')
				}
			},
			plFun() {
				if(!this.token){
					this.login = true
					return
				}
				this.authenticationShow = true
			},
			// 拨打电话
			callFun(tal) {
				uni.makePhoneCall({
					phoneNumber: tal, // 必填，要拨打的电话号码
					success: () => {
					  console.log('拨打电话成功！');
					},
					fail: () => {
					  console.log('拨打电话失败！');
					}
				});
			},
			authenticationHandle() {
				this.authenticationShow = false
			},
			clickSubmit(e) {
				this.objItem = e
				this.screenShow = false
				this.list = []
				this.page=1
				this.getProjectList()
			},
			clickHandle() {
				this.screenShow = false
			},
			screenFun() {
				// this.$refs.screenRef.opens(this.objItem)
				// this.screenShow = true
				this.pickerShow = true
			},
			// 获取轮播图getAd
			async getAd(){
				// 用户点击次数
				let {data,code} = await this.$u.api.getAd({store_id:this.store_id});
				if(code){
					if(data.length){
						let banner =[]
						data.forEach(ele=>{
							banner.push({
								image:ele.url
							})
						})
						this.bannerList = banner
						console.log(this.bannerList,"this.bannerList")
					}
				}
			},
			// 去购买
			buy(item){
				if(!this.token){
					this.login = true
					return
				}
				this.utlis.goUrl(`/pages/shop/projectOrder?peoject_id=${item.id}`)
			},
			yulan(ele){
				let arr =[this.defaultAddress.qr_code]
				this.utlis.previewImage(arr)
			},
			async goUrl(types){
				console.log("@@@@");
				let that = this
				if(this.token){
					let {data,code} = await that.$u.api.serUserClick({type:2});
				}
				if(types == 1){
					console.log(that.defaultAddress.latitude,5555);
					uni.openLocation({
					  latitude: Number(that.defaultAddress.latitude),
					  longitude: Number(that.defaultAddress.longitude),
					  scale: 28,
					  address: that.defaultAddress.position,
					  success: res => {
						console.log(res)
					  }
					})
				}else{
					console.log(that.defaultAddress,666);
					uni.openLocation({
					  latitude:  Number(that.defaultAddress.parking_latitude),
					  longitude: Number(that.defaultAddress.parking_longitude),
					  scale: 28,
					  address: that.defaultAddress.parking,
					  success: res => {
						console.log(res)
					  },
					  fail:err => {
						  console.log(err);
					  }
					})
				}
				console.log("失败了")
			},
			getaddr(){
				this.initAmapData.getRegeo({
					iconPath: "",
					iconWidth: 22,
					iconHeight: 32,
					success: async data => {
						this.$u.vuex("currentLocation",data[0])
						console.log(this.currentLocation,"currentLocationcurrentLocation")
						if(this.firstHttp){
							this.$u.vuex("isAuth",true)
							await this.getStore(1);
							this.$u.vuex("firstHttp",false)
						}
					},
					fail: info => {
						this.opset();
					}
				})
			},
			opset(){//打开设置
				uni.getSetting({
				   success:(res)=> {
					   if (!res.authSetting['scope.userLocation']){
						    uni.showModal({
								title: '是否授权当前位置',
								content: '需要获取您的地理位置，请确认授权，否则选择位置功能将无法使用',
								success:(tip)=> {
									if (tip.confirm){
										uni.openSetting({
											success: async(data) => {
												if (data.authSetting['scope.userLocation'] === true) {
													wx.showToast({
													  title: '地理位置授权成功',
													  icon: 'success',
													  duration: 1000
													})
													this.$u.vuex("isAuth",true)
													//授权成功之后，再调用chooseLocation选择地方
													await this.getaddr();
													
												} 
											}
										})
									}
								},
								fail: () => {
									uni.showToast({
									  title: '您已拒绝授权地理位置！',
									  icon: 'error',
									  duration: 1000
									})
								}
							})
					   }
				   }
				})
			},
			// 跳转到详情
			goDetail(id, url){
				this.openProjDet(id, url, 0)
			},
			
			onceMake(id,item){
			 	if(!this.token){
					this.login = true
					return
				} 
				if (this.tabIndex == 1) {
					this.$u.vuex("isRecommend", "1")
				} else {
					this.$u.vuex("isRecommend", "")
				}
				// uni.showModal({
				// 	title:'提示',
				// 	confirmColor:'#d5b35e',
				// 	confirmText:'我知道了',
				// 	content:'小程序暂不支持线上预约,请致电门店',
				// 	showCancel:false,
				// 	// buttonText:'我知道了',
				// 	success: (res) => {
				// 		if(res.confirm){
				// 			console.log('用户点击确定');	
				// 		}else if(res.cancel){
				// 			console.log('用户点击取消');	
				// 		}
				// 	}
				// })
				// return 
				this.$u.vuex("chioseProjects",[])
				this.$u.vuex("makeTech",[])
				this.$u.vuex("makeNum","")
				this.$u.vuex("makeProject",[item])
				item.isDefault = true
				this.$u.vuex("makeProject",[item])
				// if(this.tabIndex == 1){
				// 	//弹出机构详情介绍后进入-详情、购买页
				// 	this.openProjDet(id,`/pages/reserve/reserve?id=${id}`)
				// }else{
				// 	this.utlis.goUrl(`/pages/reserve/reserve?id=${id}`)
				// }
				this.openProjDet(id,`/pages/reserve/reserve?id=${id}`, 1)
				
			},
				
			async openProjDet(id, url, type){
				if(this.tabIndex == 1){
					const resp = await this.$u.api.getSysProjectStore({project_id: id});
					//弹出机构详情介绍后进入-详情、购买页
					this.bottomStoreList = resp.data || [];				//有数据时，弹出门店列表，选择门店
					if(this.bottomStoreList.length > 0){
						this.showBottomList = true;
						this.openDatType = type;
					}else{
						//无数据或直接进入详情页

						this.utlis.goUrl(url)
					}
					
				}else{
					this.utlis.goUrl(url)
				}
			},
			handleSelectStore(item){
				if(this.openDatType == 0){
					this.utlis.goUrl(`/pages/shop/projectInfo?peoject_id=${item.project_id}&type=${this.tabIndex}&store_id=${item.store.id}&isRec=1`)
				}else if(this.openDatType === 1){
					this.utlis.goUrl(`/pages/reserve/reserve?id=${item.project_id}&store_id=${item.store.id}`)
				}
				this.showBottomList = false;
				this.openDatType = undefined;
			},
			// 拨打电话
			async freeTell(){
				// 用户点击次数
				await this.$u.api.serUserClick({type:1});
				if(code){
					uni.makePhoneCall({
					  phoneNumber: this.defaultAddress.tel,
					})
				}
			},
			// 门店详情
			getStore() {
				let minArr = []
				let pls = []
				// console.log(4444444)
				 wx.getStorage({
					key: 'userLocation',
					success: async (res) => {
						console.log(66, res)
					  pls = res.data.split(',')
					  
					  this.$u.vuex("userLocationStore",pls)
					  
					  let {data,code} = await this.$u.api.getStoreInfo({
					  		lon: pls[0],
					  		lat: pls[1],
							// store_post_id: 34
					  	});
						if(code){
							let dates = data
							let end_time = dates.end_time.split(":");
							let start_time = dates.start_time.split(":");
							dates.end_time = end_time[0] + ":" + end_time[1];
							dates.start_time = start_time[0] + ":" + start_time[1];
							let dates_id = dates.id
							console.log(43435, this.store_id)
							if (!this.store_id) {
								this.$u.vuex("defaultAddress",dates)
								this.$u.vuex("store_id",dates_id)
								// this.$u.vuex("store_id", '34')
								this.$u.vuex("makeStoreInfo",dates)
								this.$u.vuex("makeStore_id",dates_id)
								this.$u.vuex("toStore",dates)
								this.$u.vuex("toStore_id",dates_id)
								
								this.getCate()
								// this.getProjectList()
								this.getAd()
							} else {
								this.$u.vuex("defaultAddress",dates)
								this.$u.vuex("store_id",dates_id)
								this.$u.vuex("makeStoreInfo",dates)
								this.$u.vuex("makeStore_id",dates_id)
								this.$u.vuex("toStore",dates)
								this.$u.vuex("toStore_id",dates_id)
							}
						}
					}
				})
			},
			// 获取门店列表
			// getStore(type){
			// 	let minArr = []
			// 	let pls = []
			// 	 wx.getStorage({
			// 		key: 'userLocation',
			// 		success: async (res) => {
			// 		  pls = res.data.split(',')
			// 		  console.log(55, pls, type)
			// 		  let {data,code} = await this.$u.api.getStore({
			// 		  		lon: pls[0],
			// 		  		lat: pls[1]
			// 		  	});
			// 		  	if(type == 1){
			// 		  	data.forEach((ele,index)=>{
			// 		  		data.isCheck = false
			// 		  		ele.distance = this.getDistance(this.currentLocation.latitude,this.currentLocation.longitude,ele.latitude,ele.longitude)
			// 		  		ele.distance2 = this.getDistance(this.currentLocation.latitude,this.currentLocation.longitude,ele.parking_latitude,ele.parking_longitude)
			// 		  		minArr.push(ele.distance*1)
			// 		  	})
			// 		  	var min=Math.min(...minArr);
			// 		  	data.forEach((ele,index)=>{
			// 		  		let end_time = ele.end_time.split(":");
			// 		  		let start_time = ele.start_time.split(":");
			// 		  		ele.end_time = end_time[0] + ":" + end_time[1];
			// 		  		ele.start_time = start_time[0] + ":" + start_time[1];
			// 		  		if(ele.distance == min){
			// 		  			this.$u.vuex("defaultAddress",ele)
			// 		  			this.$u.vuex("store_id",ele.id)
			// 		  			this.$u.vuex("makeStoreInfo",ele)
			// 		  			this.$u.vuex("makeStore_id",ele.id)
			// 		  			this.$u.vuex("toStore",ele)
			// 		  			this.$u.vuex("toStore_id",ele.id)
			// 		  		}
			// 		  	})
			// 		  	this.list=[]
			// 		  	this.page = 1
			// 		  	await this.getProjectList()
			// 		  }else{
			// 		  	// this.$u.vuex("firstHttp",false)
			// 		  	let dates = data[0]
			// 		  	let end_time = dates.end_time.split(":");
			// 		  	let start_time = dates.start_time.split(":");
			// 		  	dates.end_time = end_time[0] + ":" + end_time[1];
			// 		  	dates.start_time = start_time[0] + ":" + start_time[1];
			// 		  	let dates_id = dates.id
			// 		  	this.$u.vuex("defaultAddress",dates)
			// 		  	this.$u.vuex("store_id",dates_id)
			// 		  	this.$u.vuex("makeStoreInfo",dates)
			// 		  	this.$u.vuex("makeStore_id",dates_id)
			// 		  	this.$u.vuex("toStore",dates)
			// 		  	this.$u.vuex("toStore_id",dates_id)
			// 		  	// this.list=[]
			// 		  	// this.page = 1
			// 		  	// await this.getProjectList()
			// 		  }
			// 		  // this.list=[]
			// 		  // this.page = 1
			// 		  // this.card_id=0
			// 		  // this.tabIndex =0
			// 		  // await this.getCateList()
			// 		}
			// 	});
			// },
			 // 计算距离函数
			  Rad(d) { 
			    //根据经纬度判断距离
			    return d * Math.PI / 180.0;
			  },
			  getDistance(lat1, lng1, lat2, lng2) {
			      // lat1用户的纬度
			      // lng1用户的经度
			      // lat2商家的纬度
			      // lng2商家的经度
			      var radLat1 = this.Rad(lat1);
			      var radLat2 = this.Rad(lat2);
			      var a = radLat1 - radLat2;
			      var b = this.Rad(lng1) - this.Rad(lng2);
			      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
			      s = s * 6378.137;
			      s = Math.round(s * 10000) / 10000;
			      s = s.toFixed(1)  //保留两位小数
			      console.log('经纬度计算的距离:' + s)
			      return s
			  },
			// 项目分类切换
			tabsClick(ele,index){
				if (index === 0) {
					this.defaultValue = []
					this.fromData = {
						province_id:'',
						city_id: '',
						// area_id: ''
					}
				}
				
				this.list = []
				this.page=1
				this.tabIndex = index
				// this.card_id = ele.id
				this.getCate()
			},
			typeClick(ele,index){
				this.list = []
				this.page=1
				this.effectIndex = index
				this.getProjectList()
			},
			// 获取服务项目列表
			async getProjectList(){
				console.log(this.page,this.total,"99999999999")
				let API = this.tabIndex === 0 ? this.$u.api.getProject : this.$u.api.getSysProject
				let {data,code} = await API(Object.assign({},{
					page:this.page,
					store_id:this.store_id,
					cate_id: this.effectData[this.effectIndex] ? this.effectData[this.effectIndex].id : '', // 分类
					
				}, this.fromData));
				if(this.page == 1 && !data.data.lenght){
					this.status = 'nomore';
				}
				this.list = [...this.list, ...data.data]
				// this.list.forEach(ele=>{
				// 	ele.pic = ele.pic.split(',')
				// })
				this.total = data.total;
				if (this.total <= this.list.length) this.status = 'nomore';
				else this.status = 'loading';
				console.log(this.list,"ddd")
			},
			// // 获取项目分类
			// async getCateList(falg){
			// 	let {data,code} = await this.$u.api.getCate({
			// 		is_sys: this.tabIndex === 1 ? '1' : ''
			// 	});
			// 	let obj={
			// 		name:'全部',
			// 		id:0,
			// 	}
			// 	console.log('this.token',this.token);
			// 	// let arr = []
			// 	// if(data.length > 2){
			// 	// 	arr = data.slice(0, 2)
			// 	// }else{
			// 	// 	arr = data
			// 	// }
			// 	// this.cateList = [obj,...data]
				
			// 	this.cateList = [{name: '特色项目', id: 0}, {name: '推荐项目', id: 1}]
			// 	this.getProjectList()
			// 	// console.log(this.cateList,"this.cateList")
			// },
			
			// 授权手机号码
			async getPhoneNumber(e){
				this.loginInfo.encryptedDataPhone = e.detail.encryptedData
				this.loginInfo.ivPhone = e.detail.iv
				if(e.detail.iv){
					uni.login ({
						success: async res => {
							let { code } = res
							 this.loginInfo.code = res.code
							 await this.wxLogin()
						}
					})
				}
			},
			// 授权用户信息
			async getLogin(e){
				console.log(8438, e)
				uni.showLoading({title: '登录中'});
				// 登录
				uni.login({
					success: res => {
					 this.loginInfo.code = res.code
					 this.isClick = true
					}
				})
				
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: async (res) => {
						console.log(777, res)
						let { iv, encryptedData } = res;
						this.loginInfo.iv = iv
						this.loginInfo.encryptedData = encryptedData
						this.loginInfo.share_user_id = this.share_user_id
						this.loginInfo.store_id = this.store_id
						this.loginInfo.fid = this.fid
						this.wxLogin()
				   },
				   fail:(res1)=>{
					   uni.hideLoading();
					   console.log(res1,'登录失败');
					   this.isClick = false
				   }
				})
			},
			// 登录
			async wxLogin(){
				console.log(88, this.loginInfo)
				// #ifdef MP-KUAISHOU
					let {data,code,msg} = await this.$u.api.ksLogin(this.loginInfo);
				// #endif
				// #ifndef MP-KUAISHOU
					let {data,code,msg} = await this.$u.api.wxLogin(this.loginInfo);
				// #endif
				
				uni.hideLoading()
				if(code){
					this.login = false
					if(data.user_token){
						this.$u.vuex('token', data.user_token)
						await this.getUserInfo()
						await this.getCate()
						setTimeout(()=>{
							uni.showToast({
								duration:2000,
								title:'登录成功',
								icon:'success'
							})
						},500)
					}else{
						this.isPhoneAuth = true
					}
				}else{
					this.isClick = false
				}
			},
			// 获取用户信息
			async getUserInfo(){
				let {data,code} = await this.$u.api.userInfo({store_id:this.store_id});
				if(code){
					this.$u.vuex('userInfo', data)
					console.log('userinfo-----', data)
				}
			},
		}
	}
</script>

<style>
	page{
		/* background-color: #F4F6F8; */
	}
</style>
<style lang="scss" scoped>
.plIcons{
	float: right;
}
.pages{
	width: 100%;
	height: 100%;
	background-image: url('https://jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg.png') !important;
	background-repeat: no-repeat;
	background-size: cover;
	.content {
		// overflow-y: scroll;
		// height: 100vh;
	}
	.classifyList{
		// width: 93%;
	}
	.shop{
		&__header{
			display: flex;
			&-left{
				flex: 1;
				image{
					width: 126rpx;
					height: 32rpx;
				}
			}
			&-right{
				flex: 1;
				text-align: right;
				font-size: 24rpx;
				color: #4D5562;
				.icon-a-arrowbeifen3{
					position: relative;
					top: 4rpx;
					color: #E8C778;
				}
			}
		}
		&__mains{
			padding: 24rpx;
			background: white;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;
			margin-top: 24rpx;
			transition: max-height 0.4s ease, opacity 0.3s ease 0.2s;
			&-views{
				font-size: 24rpx;
				color: #4D5562;
				width: 100%;
				image{
					width: 22rpx;
					height: 22rpx;
					margin-right: 7rpx;
				}
				.imagel{
					width: 40rpx;
					height: 40rpx;
					float: right;
					// margin-left: 20rpx;
					margin-right: 15rpx;
				}
				.uni-icons{
					float: right;
				}
			}
		}
		&__main{
			background: white;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;
			
			height: 0;
			  opacity: 0;
			  overflow: hidden;
			   // transition: max-height 0.4s ease, opacity 0.3s ease 0.2s;
			.image{
				position: relative;
				top: 3rpx;
			}
			&-title{
				font-size: 32rpx;
				color: #242833;
			}
			&-fen{
				margin-top: 12rpx;
			}
			&-view{
				font-size: 24rpx;
				color: #4D5562;
				margin-top: 16rpx;
				image{
					width: 22rpx;
					height: 22rpx;
					margin-right: 7rpx;
				}
			}
			.plView{
				display: inline-block;
				width: 80%;
				overflow:hidden; 
				text-overflow:ellipsis;
				white-space:nowrap; 
			}
			.pls{
				font-size: 24rpx;
				color: #999999;
				position: absolute;
				right: 24rpx;
				top: 205rpx;
			}
			&-hr{
				border-top: 2rpx solid #EDEDED;
				margin: 24rpx 0 20rpx 0;
			}
			&-box{
				display: flex;
				font-size: 28rpx;
				color: #242833;
				image{
					width: 56rpx;
					height: 56rpx;
				}
				.boxLeft{
					flex: 1;
					text-align: center;
					text{
						position: relative;
						top: -17rpx;
						left: 10rpx;
					}
				}
				.boxRight{
					flex: 1;
					text-align: center;
					border-left: 2rpx solid #EDEDED;
					text{
						position: relative;
						top: -17rpx;
						left: 10rpx;
					}
				}
			}
		}
		.plShow{
			margin-top: 24rpx;
			height: 275rpx;
			padding: 24rpx;
			opacity: 1;
		}
		.plHide{
			display: none;
			transition: max-height 0.4s ease, opacity 0.3s ease 0.2s;
		}
	}
	.advertising{
		width: 686rpx;
		height: 130rpx;
		margin: 0 auto;
		margin-top: 32rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.bgcolor{
		width: 686rpx;
		// border: 1rpx solid red;
		margin: 0 auto;
		position: absolute;
		bottom: 24rpx;
		left: 32rpx;
		border-radius: 16rpx  16rpx  16rpx  16rpx;
		overflow: hidden;
	}
	.tabWrap{
		width: 100%;
		white-space:nowrap;
		margin: 30rpx 0 20rpx 0;
		position: relative;
		&__view{
			display: flex;
			&-name{
				flex: 1;
				text-align: center;
				font-size: 32rpx;
				color: #999999;
				position: relative;
				.bg{
					width: 40%;
					height: 8rpx;
					position: absolute;
					bottom: -10rpx;
					left: 30%;
				}
			}
		}
		
		.screen{
			position: absolute;
			top: 9rpx;
			right: 0;
			width: 34rpx;
			height: 34rpx;
		}
	}
	.tabs{
		display: flex;
		margin-top: 40rpx;
		.title{
			margin-right: auto;
			font-size: 40rpx;
			font-weight: 400;
			text-align: left;
			color: #071529;
			line-height: 50rpx;
		}
	}
	.tab{
		padding: 10rpx 0;
		text-align: center;
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
		margin-right: 52rpx;
		position: relative;
		margin-top: 15rpx;
		.bg{
			width: 100%;
			height: 8rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
	.tab-active{
		// color: rgba(136,29,3,1);
		// background:rgba(136,29,3,0.1);
		color: #242833;
		font-weight: bold;
	}
	.page-top{
		position: relative;
		height: 550rpx;
		image{
			z-index: -1;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 500rpx;
		}
		.site-top{
			position: absolute;
			top: 0;
			left: 38rpx;
			display: flex;
			align-items: center;
			color: #000000;
			font-size: 26rpx;
			view{
				margin: 0 8rpx;
			}
			.icon-a-xiala1{
				font-size: 18rpx;
			}
			.iconfont{
				
				color: #000000;
			}
		}
	
		.search-box{
			position: absolute;
			bottom: 290rpx;
			left: 32rpx;
			width: 686rpx;
			height: 72rpx;
			display: flex;
			align-items: center;
			background: rgba(255,255,255,0.4);
			border-radius: 35rpx;
			color: #8C9093;
			padding: 0 24rpx;
			// border: 1rpx solid red;
			input{
				height: 100%;
			}
			u-icon{
				margin-right: 20rpx;
			}
		}
		::v-deep .search-input{
			color: rgba(255,255,255,0.8);
		}
	}
	
	.navStatus{
		height: var(--status-bar-height);
		background-color: #fff;
		position: fixed;
		top: 0;
		width: 100%;
		left: 0;
		z-index: 999999;
	}
	
	.vessel{
		padding: 0 32rpx;
		.shop-info{
			margin: 32rpx 0;
			padding: 24rpx;
			background: #ffffff;
			border-radius: 8rpx;
			.iconfont{
				font-size: 40rpx;
			}
			.t1{
				margin-bottom: 20rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #242833;
				line-height: 40rpx;
				display: flex;
				text{
					font-size: 24rpx;
					font-weight: 400;
					color: #d5b35e;
					line-height: 33rpx;
					letter-spacing: 1px;
				}
			}
			.t2{
				display: flex;
				margin-bottom: 22rpx;
				font-size: 24rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 33rpx;
				letter-spacing: 1px;
			}
			.t3{
				
				padding-top:24rpx;
				margin-top: 34rpx;
				border-top: 1px solid rgba(151,151,151,0.16);
				view{
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					line-height: 33rpx;
					letter-spacing: 1px;
					// margin-top: 20rpx;
				}
				// >view{
				// 	flex: 1;
				// }
				.addressWrap{
					display: flex;
					align-items: center;
					// margin-bottom: 20rpx;
				}
				.addressWrap:first-child{
					border-bottom: 1px solid rgba(151,151,151,0.16);
					padding-bottom: 24rpx;
				}
				.addressWrap:last-child{
					padding-top: 24rpx;
				}
			}
		}
		.goods-box{
			.goods{
				padding: 24rpx;
				display: flex;
				background: #ffffff;
				border-radius: 20rpx;
				margin-bottom: 24rpx;
				image{
					width: 188rpx;
					height: 188rpx;
					border-radius: 8rpx;
				}
				>view{
					flex: 1;
					padding: 0rpx 0rpx 0rpx 30rpx;
				}
				.t1{
					display: flex;
					font-weight: 400;
					text-align: left;
					font-size: 28rpx;
					color: #1D2129;
					line-height: 37rpx;
					height: 37rpx;
					// width: 100%;
					&-name{
						width: 400rpx;
						overflow: hidden;
						  white-space: nowrap;
						  text-overflow: ellipsis;
						font-size: 28rpx;
						color: #1D2129;
					}
					&-auto{
						width: 30%;
						// border: 1rpx solid saddlebrown;
						font-size: 20rpx;
						color: #E8C778;
						text-align: right;
					}
					// text{
					// 	font-size: 20rpx;
					// 	font-weight: 400;
					// 	text-align: right;
					// 	color: #999999;
					// 	line-height: 28rpx;
					// }
				}
				.t2{
					// width: 88rpx;
					display: inline-block;
					padding: 0 10rpx;
					height: 28rpx;
					line-height: 28rpx;
					background: #495057;
					font-size: 16rpx;
					font-weight: 400;
					text-align: left;
					color: #E8BC88;
					line-height: 28rpx;
					margin-bottom: 8rpx;
					text-align: center;
					border-radius: 4rpx  4rpx  4rpx  4rpx;
					margin-top: 25rpx;
					image{
						width: 16rpx;
						height: 16rpx;
						position: relative;
						top: 3rpx;
						margin-right: 6rpx;
					}
				}
				.t3{
					margin-top: 10rpx;
					text{
						border-radius: 4rpx  4rpx  4rpx  4rpx;
						padding: 7rpx 12rpx;
						font-size: 16rpx;
						color: #E8C778;
						border: 1rpx solid #E8C778;
						margin-right: 15rpx;
						border-radius: 4rpx;
					}
				}
				.plsL{
					position: relative;
				}
				.price-texts{
					font-size: 24rpx;
					color: #007664;
					text-align: right;
					letter-spacing: 1px;
					font-weight: 400;
					padding-left: 20rpx;
					position: absolute;
					bottom: 55rpx;
					right: 0;
				}
				.price{
					width: 100%;
					display: flex;
					align-items: center;
					position: absolute;
					bottom: 0;
					margin-top: 5rpx;
					.price-text{
						font-size: 32rpx;
						color: #007664;
						text-align: right;
						letter-spacing: 1px;
						font-weight: bold;
						padding-left: 20rpx;
						position: relative;
						text{
							font-size: 24rpx;
							color: #007664;
							margin-right: 5rpx;
							position: absolute;
							bottom: 5rpx;
							left: 0;
						}
					}
					
					.make{
						font-size: 24rpx;
						font-weight: 400;
						color: #007664;
						line-height: 33rpx;
						letter-spacing: 1px;
						margin-right: 18rpx;
						// border: 1rpx solid red;
					}
					.buy{
						width: 128rpx;
						height: 49rpx;
						background-image: linear-gradient(90deg, #50DCC2, #007664);;
						border-radius: 8rpx;
						font-size: 24rpx;
						font-weight: 400;
						text-align: center;
						color: #ffffff;
						line-height: 49rpx;
						letter-spacing: 1px;
						position: absolute;
						right: 25rpx;
					}
					.citys{
						font-size: 22rpx;
						font-weight: 400;
						color: #E8C778;
						letter-spacing: 1px;
						position: absolute;
						right: 25rpx;
						top: -45rpx;
					}
				}
			}
			
		}
	}

	.mask_login{
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		bottom: 0;
		opacity: 0;
		z-index: 9999;
	}
}
.league{
	position: fixed;
	bottom: 100rpx;
	right: 20rpx;
	image{
		width: 110rpx;
		height: 110rpx;
	}
}
.blue{
	color: #47B1F1 !important;
}
.addres{
	text:nth-child(2){
		display: inline-block;
		margin-left: 24rpx;
	}
	// width: 590rpx;
	// overflow: hidden;    
	// text-overflow:ellipsis;    
	// white-space: nowrap;
}
.zw{
	width: 100rpx;
	height: 1rpx;
	margin-right: 30rpx;
}
.u-p-l-16{
	font-size: 24rpx;
}
.plsss{
	color: #007664 !important;
}

.popup-store-content {
  background: #fff;
  border-radius: 12px 12px 0 0;
  padding: 20px;
  max-height: 60vh;
}

.popup-store-header {
  text-align: center;
  font-weight: bold;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.store-list {
  max-height: 50vh;
}

.store-item {
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.store-title {
  display: block;
  font-size: 16px;
  color: #333;
}

.store-position {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
</style>

